<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>watch观察属性的应用</title>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
		<script src="../js/vue.js"></script>
	</head>
	
	<!-- 
	 双11活动中watch 函数关注最新的价格变动
	 如果价格变动的不符合自己内容就改变go的值 如果go的值发生改变 在砍价方法中就不能被执行
	 如果show的值改变后 页面会给出提示给用户不能砍了！！
	 当然 立即下单的功能就是提醒大家 砍价都是套路 全额付款才是王道
	 -->
	<body>
		<div id="app">
			<p>双11活动iPhone12大降价 不行你就来砍一刀</p>
			<p>原价{{price}}</p>
			<p>砍完后{{newprice}}</p>
			<p><button v-on:click="buy">立即下单</button></p>
			<button v-on:click="ChopAknife(newprice)">点击随机砍一刀</button>
			<h1 v-show="show" style="color: red;">大哥！现价格{{newprice}}不能再砍了!!!</h1>
		</div>

		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					go:true,
					price: 12888,
					newprice: 12888,
					show: false
					
				},
				methods: {
					ChopAknife: function(price) {
						//如果手机价格大于5000块钱我们就要砍一刀
						console.log(price);
						if (this.go) {
							this.newprice = price * Math.random();
						}
					},
					buy: function() {
						if (this.newprice != 12888) {
							alert("没货了")
						} else {
							alert("购买成功")
						}
					}

				},
				watch: {
					newprice: function() {
						if (this.newprice < 5000) {
							this.show = true;
							this.go=false;
						} else {
							alert("恭喜大哥砍价成功最新价格是" + this.newprice);
						}

					}
				}
			});
		</script>
	</body>
</html>
